<template>
    <div class="wrong-question">
        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="错题库" name="mockExam">
                <div class="header">
                    <span>总题数：{{ wrongQuestionTotal }}</span>
                    <div class="setting">
                        <span class="tips">注:目前设置连续做对一次移除错题库</span>
                        <el-button type="primary" @click="showPractiseSetting">练习设置</el-button>
                    </div>
                </div>
                <div class="main">
                    <table class="table" border="0" cellpadding="0" cellspacing="0">
                        <thead>
                            <tr>
                                <th>知识点</th>
                                <th>题数</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in 1" :key="item">
                                <td>初级接警调度员</td>
                                <td>18</td>
                                <td>
                                    <el-button @click="viewAnalysis">查看解析</el-button>
                                    <el-button @click="startPractice" type="primary">开始练习</el-button>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
    <el-dialog class="fire-exam-dialog" v-model="wrongQuestionVisible" title="练习设置" width="497px" draggable destroy-on-close
        :before-close="handleClose">
        <div class="dialog-body">
            <el-table class="table" ref="multipleTableRef" :data="tableData" style="width: 100%"
                @selection-change="handleSelectionChange">
                <el-table-column type="selection" label="全选" />
                <el-table-column property="name" label="知识点" show-overflow-tooltip />
                <el-table-column label="操作">
                    <el-button text style="padding: 0;" disabled>删除</el-button>
                </el-table-column>
            </el-table>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button type="primary" disabled @click="wrongQuestionVisible = false">确定</el-button>
                <el-button disabled @click="wrongQuestionVisible = false">取消</el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script setup>

const activeName = ref('mockExam')

const handleClick = (tab, event) => {
    console.log(tab, event)
}

const wrongQuestionList = ref([])
const wrongQuestionTotal = ref(1)


const wrongQuestionVisible = ref(false)
function handleClose() {
    wrongQuestionVisible.value = false
 }

function showPractiseSetting() {
    wrongQuestionVisible.value = true
}

const tableData = ref([{
    name: '初级接警调度员',
},
{
    name: '中级接警调度员',
},
{
    name: '高级接警调度员',
},])
function handleSelectionChange() { }

const router = useRouter()

// 查看解析
function viewAnalysis() {
    return
    router.push({ name: 'WrongQuestionAnalysis' })
}

// 开始练习
function startPractice() {
    return
    router.push({ name: 'WrongQuestionPractice' })
}
</script>
<style scoped lang="scss">
.wrong-question {
    padding: 25px 0;

    .demo-tabs {
        height: 100%;

        :deep(.el-tabs__content) {
            height: calc(100% - 40px);
            padding: 51px 42px;

            .el-tab-pane {
                height: 100%;
            }
        }
    }

    .year-tags {
        font-size: 16px;
        margin-bottom: 50px;

        .year-tags-label {
            margin-right: 34px;
            color: #333;
            cursor: pointer;
        }

        .year-tags-item {
            margin-right: 36px;
            color: #666;
            cursor: pointer;

            &.active {
                color: #3872A9;
                font-weight: bold;
            }
        }
    }

    .header {
        margin-bottom: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        font-weight: bold;
        color: #333;

        .setting {
            color: #F54336;

            .tips {
                margin-right: 32px;
            }
        }
    }

    .main {
        .table {
            width: 100%;
            table-layout: fixed;
            border-spacing: 0;
            border-collapse: collapse;
            border: 1px solid #EEF0F6;

            tr {
                text-align: left;

                th,
                td {
                    padding-left: 58px;
                    font-size: 16px;
                }

            }

            thead {
                height: 70px;
                color: #fff;
                font-weight: bold;

                th {
                    background: #0C75F4;


                    &:first-child {
                        border-top-left-radius: 8px;
                    }

                    &:last-child {
                        border-top-right-radius: 8px;
                    }
                }
            }

            tbody {
                tr {
                    color: #666666;
                    height: 70px;
                    border-bottom: 1px solid #EEF0F6;
                }
            }
        }
    }
}


.dialog-body {
    padding: 28px 19px;

    .table {
        border: 1px solid #EEF0F6;
    }
}
</style>